<template>
    <div class="mui-content customerServiceList mgb2" id="customerPull">
        <ul class="mgt1 mui-table-view">
            <li class="mui-table-view-cell">
                <p class="text2-size color2">您在用车中遇见任何问题可以与客服联系咨询</p>
            </li>
        </ul>
        <ul class="mgt1 mui-table-view mui-table-view-chevron" v-for="customer in customerList">
            <li class="mui-table-view-cell">
                <div class="col-2 headImgWrap">
                    <div class="headImg">
                        <img v-bind:src="customer.csImg" alt="{{customer.csName}}">
                    </div>
                </div>
                <div class="col-7 customerInfo">
                    <p class="customerName">
                        <span class="text7-size color1">{{customer.csName}}</span>
                        <i class="stateIcon zaixianIcon" v-if="customer.csStatus==1"></i>
                        <i class="stateIcon mangluIcon" v-if="customer.csStatus==2"></i>
                        <i class="stateIcon lixianIcon" v-if="customer.csStatus==0"></i>
                    </p>
                    <p>
                        <span class="color2 text3-size">服务评分：</span><span class="color4 text2-size">{{customer.csScore | toDou}}</span>
                    </p>
                </div>
                <div class="col-3 askBtn" >
                    <button class="mui-btn mui-btn-primary text3-size" @click="customerEnquiry(customer)">
                        <span class="mui-icon mui-icon-chatboxes text1-size"></span>
                        <span class="text2-size">提问</span>
                    </button>
                </div>
            </li>
        </ul>
        <div class="customerTips">
            <p class="color2 text2-size mui-text-center">客服在线时间：10:00 ~ 18:00</p>
            <p class="color2 text2-size mui-text-center">我们拥有专业的团队，为您解决用车问题！</p>
            <p class="color3 text2-size mui-text-center"  @click="toPage('carDoctor/list')">查看专家团队</p>
        </div>
    </div>
    <footer-nav-component index="customerServiceList"/>
</template>
<style>
    .customerServiceList .headImgWrap{padding-right: 0.15rem; position: relative;}
    .customerServiceList .headImg{width: 1.1rem !important; height: 1.1rem !important; border-radius: 100%; z-index: 120; max-height: 1.1rem; max-width: 1.1rem; display: inline-block; display: inline-block; overflow: hidden;}
    .customerServiceList .headImg img{width: 100%; display: inline-block;}
    .customerServiceList .headImgWrap .stateIcon{position: absolute; right:-0.1rem; bottom: 0.15rem;}
    .customerServiceList .customerInfo{box-sizing: border-box; padding-left:0.2rem; padding-top: 0.15rem;}
    /*提问*/
    .customerServiceList .askBtn{padding-top: 0.22rem; box-sizing: border-box;}
    .customerServiceList .customerTips{margin-top: 0.3rem;}
    .customerServiceList .customerTips p:last-child{margin-top: 0.1rem;}
    .customerServiceList p{margin-bottom: 0;}
    .customerName,.customerName>span{vertical-align: middle}
    .customerName .stateIcon{display: inline-block; width: 0.3rem; height: 0.3rem; background-repeat: no-repeat; background-size: 100%; vertical-align: middle}
    .customerName .zaixianIcon{background-image: url("../../images/zaixian.svg")}
    .customerName .lixianIcon{background-image: url("../../images/lixian.svg")}
    .customerName .mangluIcon{background-image: url("../../images/manglu.svg")}
</style>
<script type="text/ecmascript-6">
        import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
		import '../../fonts/mui.css';
        import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            data(){
                return {
                    customerList: [],
                }
            },
            ready () {
                this.getJSON(API.LIST_CUSTOMER_SERVICE, {}, res => {
                    this.customerList = res.resultData;
                });
                /*mui.init({
                    pullRefresh: {
                        container: '#customerPull',
                        down: {
                            callback: this.customerPullDown
                        },
                    }
                });
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });*/
            },
            components:{
                footerNavComponent
            },
            methods:{
                customerEnquiry:function(customer){
                    if (customer.csStatus == 0) {
                        mui.toast(customer.csName + '不在线，请选择其他',{ duration:'short', type:'div'});
                        return;
                    }

                    if (customer.csStatus == 2) {
                        mui.toast(customer.csName + '忙碌中，请选择其他',{ duration:'short', type:'div'});
                        return;
                    }

                    //request
                    this.getJSON(API.GET_ONLINE_ENQUIRY, {account:customer.csAccount}, res => {
                        //close weixin browser
                        WeixinJSBridge.invoke('closeWindow',{},function(res){});
                    });
                },
                /*//下拉刷新具体业务实现
                customerPullDown:function () {
                    window.location.reload();
                },*/
                toPage(str){
                    let that=this;
                    that.$router.go('/'+str);
                },
            }
    });
</script>

